Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Social Links: Fix font family and weight inconsistency in editor #67204

Merged
merged 1 commit into from
Nov 22, 2024
Merged

Social Links: Fix font family and weight inconsistency in editor #67204

merged 1 commit into from
Nov 22, 2024

Conversation

SainathPoojary
Copy link
Contributor

@SainathPoojary SainathPoojary commented Nov 21, 2024 •
edited by Mamaduka
Loading

Fixes #46778

What?

Added font-weight: inherit; and font-family: inherit; to the .wp-block-social-link-anchor class in the editor to ensure consistent font styling with the frontend.

Why?

The inconsistency was caused because:

  • Frontend: Social links use an <a> tag, inheriting font-family and font-weight from the body.
  • Editor: Social links use a <button> element, which applies default button styles (font-family and font-weight) instead of inheriting from the body.

This change ensures uniform font styling for social links across both the editor and frontend.

How?

Updated the .wp-block-social-link-anchor class in the editor with the following CSS:

font-weight: inherit;  
font-family: inherit;

Testing Instructions

  1. Open the editor and add a social links block.
  2. Add a few social links and check the font weight and font family.
  3. Save and view the post on the frontend.
  4. Compare the font styling (weight and family) between the editor and frontend to ensure consistency.

Screenshots or screencast

Before:

Chrome:

Editor Frontend
image image

Firefox:

Editor Frontend
image image

After fix:

Chrome:

Editor Frontend
image image

Firefox:

Editor Frontend
image image

@SainathPoojary
Social Links: Fix font family and weight inconsistency in editor
f90db5f 
Added font-weight: inherit; and font-family: inherit; to the .wp-block-social-link-anchor class in the editor to ensure consistent font styling with the frontend.
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 21, 2024 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @bgardner.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: bgardner.

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: akasunil <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jordesign <[email protected]>
Co-authored-by: himanshupathak95 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 21, 2024
@github-actions GitHub Actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SainathPoojary! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@akasunil akasunil added [Type] Bug An existing feature does not function as intended [Block] Social Affects the Social Block - used to display Social Media accounts labels Nov 22, 2024
akasunil
akasunil approved these changes Nov 22, 2024
View reviewed changes
Copy link
Member

@akasunil akasunil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@Mamaduka Mamaduka added the props-bot Adding this label triggers the Props Bot workflow for a PR. label Nov 22, 2024
@github-actions github-actions bot removed the props-bot Adding this label triggers the Props Bot workflow for a PR. label Nov 22, 2024
@Mamaduka Mamaduka merged commit 58ae911 into WordPress:trunk Nov 22, 2024
72 of 74 checks passed
@github-actions github-actions bot added this to the Gutenberg 19.8 milestone Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@akasunil akasunil akasunil approved these changes

@Mamaduka Mamaduka Mamaduka approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 19.8
Development

Successfully merging this pull request may close these issues.

Social Icons block label is using WP-Admin styles for text
3 participants
@SainathPoojary @Mamaduka @akasunil